<template>
  <div id="NewsInformation">
    <div class="container">
      <div class="container text-center">
        <h3>历史沿革</h3>
        <!-- <p style="color: #b2b2b2">Company News</p> -->
      </div>
      <!-- <div class="nav container text-center">
        <a href="javascript:;" class="active">公司新闻</a>
        <a href="javascript:;">行业动态</a>
      </div> -->
      <ul class="news-container container-fuild">
        <li v-for="(item, index) in historyList" :key="index" class="wow fadeIn">
          <div class="content">
            <p>{{ item.title }}</p>
            <a>{{ item.introduce }}</a>
          </div>
          <div class="time">
            <p>{{ item.date }}</p>
            <span>{{ item.year }}</span>
          </div>
          <div class="circle">
            <img src="@/assets/img/circle.png" />
            <i class="line center-block"></i>
          </div>
        </li>
      </ul>
      <div class="contaianer-fuild text-center more">
        <i class="glyphicon glyphicon-th"></i>
      </div>
    </div>
  </div>
</template>

<script setup name="NewsInformation">
import WOW from 'wow.js'
import { onMounted } from 'vue'
const historyList = [
  {
    id: '001',
    title: '汉口铁路运输分局',
    introduce: '武昌铁路分局并入汉口铁路分局，同时更名为汉口铁路运输分局，隶属郑州铁路管理局。',
    date: '1月',
    year: '1953'
  },
  {
    id: '002',
    title: '武汉铁路管理局',
    introduce: '武汉第一次设局，称武汉铁路管理局',
    date: '10-01',
    year: '1958'
  },
  {
    id: '003',
    title: '长沙铁路管理局并入武汉铁路管理局',
    introduce: '长沙铁路管理局并入武汉铁路管理局。武汉局下辖汉口、信阳和长沙3个办事处',
    date: '8月',
    year: '1961'
  },
  {
    id: '004',
    title: '武汉铁路分局',
    introduce: '武汉铁路管理局撤销，同时成立武汉铁路分局，管辖湖北省境内铁路，隶属郑州铁路管理局。',
    date: '04-01',
    year: '1963'
  },
  // 注意：原代码中的'005'条目中年份错误，应该是1966年而不是1996年。
  {
    id: '005',
    title: '襄樊铁路分局',
    introduce: '襄樊铁路分局成立，隶属郑州铁路管理局。',
    date: '06-01',
    year: '1966'
  },
  {
    id: '006',
    title: '武汉铁路局',
    introduce: '武汉第二次设局，称武汉铁路局。主要管辖湖北省境内铁路，下设武汉、襄樊2个铁路分局。',
    date: '07-01',
    year: '1971'
  },
  {
    id: '007',
    title: '武汉铁路局撤销',
    introduce: '武汉铁路局再次撤销，武汉、襄樊2个铁路分局隶属郑州铁路局。',
    date: '03-01',
    year: '1983'
  },
  {
    id: '008',
    title: '京广线区段划归武汉铁路分局',
    introduce: '京广线孟庙以南至东篁店段和孟宝支线由郑州铁路分局划武汉铁路分局管辖。',
    date: '3月',
    year: '1987'
  },
  {
    id: '009',
    title: '武汉铁路局重组',
    introduce: '铁道部决定撤销武汉、襄樊铁路分局，重新成立武汉铁路局，实行路局直管站段体制。',
    date: '03-18',
    year: '2005'
  },
  {
    id: '010',
    title: '南昌铁路局线路划归武汉铁路局',
    introduce: '南昌铁路局京九线淮滨至蔡山段、宁西线潢川北站至祖师庙站划归武汉铁路局管辖。',
    date: '05-15',
    year: '2005'
  },
  {
    id: '011',
    title: '武汉铁路局接管宜万线',
    introduce: '武汉铁路局接管了宜万线指挥和施工两项权利，所有设备和技术资料全部移交到国铁，完成基本建设项目，进入开通运营实质性阶段。',
    date: '11-15',
    year: '2010'
  },
  {
    id: '012',
    title: '襄樊站更名及机构调整',
    introduce: '原襄樊站、襄樊北站等6个运输站段冠以“襄阳”名号，襄樊站管辖的襄阳站、襄樊东站分别更名为襄阳南站、襄阳东站。',
    date: '06-08',
    year: '2011'
  },
  {
    id: '013',
    title: '襄阳客运段恢复建制',
    introduce: '襄阳客运段挂牌，宣告撤销5年的襄阳客运段恢复建制。',
    date: '11-22',
    year: '2011'
  },
  {
    id: '014',
    title: '襄阳东站投入使用',
    introduce: '襄阳东站投入使用，武康二线所有配套工程全面完工。',
    date: '07-01',
    year: '2012'
  }
];
onMounted(() => {
  var wow = new WOW()
  wow.init()
})
</script>

<style scoped>
/* .nav {
  margin: 20px 0;
}
.nav > a {
  display: inline-block;
  text-decoration: none;
  width: 120px;
  height: 45px;
  line-height: 45px;
  color: #333;
  border: 1px solid #333;
}
.nav > a.active {
  color: #1e73be;
  border-color: #1e73be;
}
.nav > a:hover {
  color: #1e73be;
  border-color: #1e73be;
} */
.news-container {
  overflow: hidden;
  margin-bottom: 0;
  flex-grow: 1;
  padding-top: 50px; /* 导航栏的高度 */
}
.news-container > li {
  width: 55.6%;
  height: 120px;
  float: left;
  color: #333;
  text-align: right;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
}
.news-container > li:hover {
  color: #1e73be;
  border: 1px solid #1e73be;
  cursor: pointer;
}
.news-container > li:nth-of-type(2n) {
  float: right;
  text-align: left;
}
.news-container > li > .content {
  width: 60%;
  float: left;
  padding: 20px 0;
}
.news-container > li > .content > p {
  font-size: 20px;
  margin: 5px 0;
}
.news-container > li > .time {
  width: 20%;
  float: left;
  padding: 10px 0;
}
.news-container > li > .time > p {
  font-size: 30px;
  margin: 5px 0;
}
.news-container > li > .circle {
  width: 20%;
  height: 100%;
  float: left;
  position: relative;
}
.news-container > li > .circle > img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 20px;
  height: 20px;
}
.news-container > li > .circle > i {
  display: block;
  width: 1px;
  height: 100%;
  background: #707070;
}
.news-container > li:nth-of-type(2n) > .content {
  float: right;
}
.news-container > li:nth-of-type(2n) > .time {
  float: right;
}
.news-container > li:nth-of-type(2n) > .circle {
  float: right;
}
.news-container > li:nth-of-type(1) > .circle > i {
  height: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
}
.more {
  font-size: 25px;
  color: #707070;
}
.more > i {
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  .news-container > li {
    width: 100%;
  }
  .news-container > li > .content {
    width: 70%;
    text-align: left;
    float: right;
  }
  .news-container > li > .time {
    width: 30%;
    text-align: left;
    float: right;
  }
  .news-container > li > .circle {
    display: none;
  }
}
</style>

